<template>
  <div class="menuPhone">
    <div class="logo">
      <img src="../../assets/menuBar/nav_lodo.png" alt="">
    </div>
    <div class="menuNavPhone">
      <div class="phoneLogo">
        <router-link :to="{name:'Home',params: {id:'1'}}" tag="p" class="active">
          首页
        </router-link>
        <img src="../../assets/menuBar/nav_btn.png" alt="" @click="isShowMenu">
      </div>

      <ul class="phoneCon" v-show="menuPhoneFlag">
        <router-link :to="{name:'AboutUs',params: {id:'2-1'}}" tag="li" @click.native="menuPhoneFlag=false">
          关于康护
        </router-link>
        <router-link :to="{name:'ProductDisplay',params: {id:'3-1'}}" tag="li" @click.native="menuPhoneFlag=false">
          产品展示
        </router-link>
        <router-link :to="{name:'Partners',params: {id:'4-1'}}" tag="li" @click.native="menuPhoneFlag=false">
          合作客户
        </router-link>
        <router-link :to="{name:'ContactUs',params: {id:'5-1'}}" tag="li" @click.native="menuPhoneFlag=false">
          联系我们
        </router-link>
      </ul>

    </div>
  </div>

</template>

<script>
  export default {
    name: "menu-phone",
    components: {},
    data() {
      return {
        menuPhoneFlag: false,
        // menuPhoneItemFlag: false,
      }
    },
    methods: {
      isShowMenu() {
        this.menuPhoneFlag = !this.menuPhoneFlag;
      },
    }
  }
</script>

<style scoped lang="less">
  .menuPhone {
    height: 50px;
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .logo {
      width: 109px;
      height: 27px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .menuNavPhone {
      width: 35%;
      position: absolute;
      top: 0;
      right: 16px;
      .active {
        color: #4bb2df;
      }
      .phoneLogo {
        width: 100%;
        height: 50px;
        text-align: center;
        font-size: 18px;
        line-height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          width: 50%;
        }
        img {
          width: 23px;
          height: 20px;
          margin-left: 20%;
        }
      }
      .phoneCon {
        width: 80%;
        height: 100%;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 20;
        li {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 18px;
          border-bottom: 1px solid #ccc; /*no*/
          background-color: #fff;
        }
      }

    }
  }


</style>
